<template>
  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="账户选择" name="account">
      <a-select
        placeholder="银行卡号(账户名称)"
        v-model:value="selectObj"
        allow-clear
        @change="handleAccountChange"
        @focus="reload"
      >
        <a-select-option
          v-for="item in options"
          :key="item.value"
          :value="item.value">{{ item.label }}
        </a-select-option>
      </a-select>

      <svg t="1627347168635"
           class="icon"
           @click="editEvent"
           style="position: absolute;top:-7px;cursor: pointer"
           viewBox="0 0 1024 1024"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="1958"
           width="32"
           height="32">
        <path
          d="M909.5 960.3H113c-27.5 0-49.8-22.3-49.8-49.8V114c0-27.5 22.3-49.8 49.8-49.8h796.5c27.5 0 49.8 22.3 49.8 49.8v796.5c0 27.5-22.3 49.8-49.8 49.8zM760.2 487.4h-224v-224h-49.8v224h-224v49.8h224v224h49.8v-224h224v-49.8z"
          fill="#1296db" p-id="1959"></path>
      </svg>

    </a-form-item>
  </a-col>

  <vxe-modal v-model="flagCollection.showEdit"
             title="新增账户"
               id="accountModal"
             min-width="600"
             min-height="300"
             :lock-view="false" :mask="false"
             show-zoom resize remember dblclickZoom destroy-on-close>
    <template #default>
      <a-form
        style="z-index: 100"
        ref="accountForm"
        :model="insertEntity"
        :rules="rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 17}, sm: {span: 24}}"
        title-align="right"
        title-width="100">
        <a-row :gutter="16">
          <a-col :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-item label="银行卡号:" name="bankAccount">
              <a-input
                v-model:value="insertEntity.bankAccount"
                placeholder="请输入银行卡号"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-item label="账户号:" name="name">
              <a-input
                v-model:value="insertEntity.name"
                placeholder="请输入账户号"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-item label="开户银行:" name="bank">
              <a-input
                v-model:value="insertEntity.bank"
                :maxlength="255"
                placeholder="请输入开户银行"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div style="text-align: right">
        <a-button type="primary" @click="onSubmit">
          保存
        </a-button>
        <a-button @click="cancelFn">取消</a-button>
      </div>

    </template>


  </vxe-modal>

</template>

<script>
import AccountMapSelect from "./js/index.js"
import {defineComponent} from 'vue'

export default defineComponent({
  name: "MAccountSelect",
  props: {
    entity: String,
    businessId: String,
    colSize: {
      type: Object,
      default: () => {
        return {
          lg: 12,
          md: 12,
          sm: 24,
          xs: 24,
        }
      }
    }
  },
  setup(props) {
    const {
      reload,
      business,
      rules,
      cancelFn,
      insertEntity,
      flagCollection,
      selectObj,
      accountEntity,
      options,
      packOptions,
      handleAccountChange,
      editEvent,
      saveOption,
      vaildAccount,
      getOption,
      onSubmit,
      accountForm,
    } = AccountMapSelect(props)

    return {
      reload,
      handleAccountChange,
      options,
      selectObj,
      onSubmit,
      business,
      accountForm,
      rules,
      cancelFn,
      insertEntity,
      flagCollection,
      accountEntity,
      packOptions,
      editEvent,
      saveOption,
      vaildAccount,
      getOption,
    }
  }
})
</script>

<style scoped>

</style>
